<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app"></div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: "#app",
            data() {
                return {
                    value: "value"
                };
            },
            // 
            beforeCreate() {
                // 在before和methods还没有初始化,数据劫持和数据代理还没有实现的时候的生命周期
                console.log(this);
                // debugger
            },
            created() {
                //created是在beforeCreate后的一个声明周期,是在数据劫持和数据代理实现后的声明周期
                // 这时methods上的函数和data中的数据已经由vm实例代理,可以在vm上看见
                console.log(this);
                // debugger
            },
            //  此阶段后.vue开始解析模板,判断是否含有el指定加载模板的位置                                                                                                                                                                                                
            beforeMount() {
                // 当页面挂载前执行当前钩子
            },
            monunt() {
                // 挂载结束,可以使用$el访问到真实dom
                // 一般在此处创建初始化人任务,例如设置定时器,初始化ajax请求,绑定订阅等
            },
            beforeUpdate() {
                //数据更新页面修改前,此时数据为新,页面为旧
                // 只有在页面中使用的数据才能进入的更新阶段
            },
            beforeDestroy() {
                //页面即将卸载,在此处取消和做一些收尾工作
                // 例如定时器的取消,订阅的取消等
            },
        });
    </script>
</body>

</html>